<script lang="ts" setup>
import { ref } from 'vue'
import { VueCropper } from 'vue-cropper'
import { ElMessage } from 'element-plus'
import { useMainStore } from '@/store/main'
import wsjzglService from '@/api/wsjzgl'
import { Scrollbar, Virtual, Mousewheel } from 'swiper/modules'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/scrollbar'
import 'swiper/css/mousewheel'
import 'swiper/css/virtual'

const swiperRef = ref()
const modules = [Scrollbar, Virtual, Mousewheel]
const store = useMainStore()
const emit = defineEmits(['indexChange'])
const props = defineProps<{
  showTab: boolean
  dzjzList: any[]
}>()

const url = ref()
const getDzjzPdf = (data: any, index: number) => {
  currentIndex.value = index
  swiperRef.value.slideTo(index)
  const params = {
    dwbm: store.$state.userInfo?.dwbm,
    wjhz: data.wjhz,
    wjxh: data.wjxh,
  }
  wsjzglService
    .downTyywwj(params)
    .then((res) => {
      if (res.data.type === 'application/json') {
        const reader = new FileReader()
        reader.onload = () => {
          const jsonData =
            typeof reader.result === 'string' ? JSON.parse(reader.result) : reader.result
          ElMessage({ type: 'warning', message: jsonData.message })
        }
        reader.readAsText(res.data)
      } else {
        url.value = window.URL.createObjectURL(res.data)
      }
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

const activeName = ref('first')
// 裁剪组件需要使用到的参数
const options = ref({
  img: url, // 需要剪裁的图片
  mode: 'contain',
  canMove: true,
  size: 1,
  autoCrop: true, // 是否默认生成截图框
  autoCropWidth: 150, // 默认生成截图框的宽度
  autoCropHeight: 150, // 默认生成截图框的长度
  fixedBox: false, // 是否固定截图框的大小 不允许改变
  info: true, // 裁剪框的大小信息
  outputSize: 1, // 裁剪生成图片的质量 [1至0.1]
  outputType: 'png', // 裁剪生成图片的格式
  canScale: false, // 图片是否允许滚轮缩放
  fixed: true, // 是否开启截图框宽高固定比例
  fixedNumber: [1, 1], // 截图框的宽高比例 需要配合centerBox一起使用才能生效 1比1
  full: true, // 是否输出原图比例的截图
  canMoveBox: true, // 截图框能否拖动
  original: false, // 上传图片按照原始比例渲染
  centerBox: true, // 截图框是否被限制在图片里面
  infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
  accept: 'image/jpeg,image/jpg,image/png,image/gif,image/x-icon',
})
const cropperRefs = ref<any[]>([])
const getRefs = (el: any, index: number) => {
  cropperRefs.value[index] = el
}
// 放大操作
const enlargeClick = () => {
  cropperRefs.value[currentIndex.value].changeScale(10)
}
// 缩小操作
const narrowClick = () => {
  cropperRefs.value[currentIndex.value].changeScale(-10)
}

// 上一页
const currentIndex = ref<any>(0)

const lastPageClick = () => {
  // 第一页终止
  if (currentIndex.value === 0) {
    ElMessage.warning('当前已是第一页')
    return
  }
  swiperRef.value.slidePrev()
}

const nextPageClick = () => {
  // 最后一页终止
  if (currentIndex.value + 1 === props.dzjzList.length) {
    ElMessage.warning('当前已是最后一页')
    return
  }
  swiperRef.value.slideNext()
}

const mode = ref('contain')
const changeMode = (val: string) => {
  options.value.mode = val
}

const onSwiper = (swiper: any) => {
  swiperRef.value = swiper
}
const onSlideChange = (swiper: any) => {
  getDzjzPdf(props.dzjzList[swiper.activeIndex], swiper.activeIndex)
  emit('indexChange', props.dzjzList[swiper.activeIndex])
}

defineExpose({ getDzjzPdf })
</script>

<template>
  <div class="dzjz-container">
    <el-tabs v-if="showTab" v-model="activeName" class="dzjz-tabs" type="card">
      <el-tab-pane label="诉讼文书卷" name="first"> </el-tab-pane>
    </el-tabs>
    <div
      class="content"
      v-if="dzjzList.length"
      :style="{ height: showTab ? 'calc(100% - 44px)' : '100%' }"
    >
      <!-- 头部 -->
      <div class="top">
        <div class="button-group">
          <div class="zoom-in" title="放大" @click="enlargeClick"></div>
          <div class="zoom-out-disabled" title="缩小" @click="narrowClick"></div>
          <el-select class="select-mode" v-model="mode" @change="changeMode">
            <el-option label="适合页面" value="contain"></el-option>
            <el-option label="适合页宽" value="100% auto"></el-option>
          </el-select>
          <div class="prev-btn" @click="lastPageClick()" title="上一页"></div>
          <div class="next-btn" title="下一页" @click="nextPageClick()"></div>
        </div>
      </div>
      <div class="preview-box">
        <div class="page-num">{{ currentIndex + 1 }}/{{ dzjzList.length }}</div>
        <swiper
          direction="vertical"
          :modules="modules"
          :scrollbar="{ draggable: true }"
          virtual
          mousewheel
          :allowTouchMove="false"
          @swiper="onSwiper"
          @slideChange="onSlideChange"
        >
          <swiper-slide
            v-for="(item, index) in dzjzList"
            style="width: 100%; height: 100%"
            :key="item.wjbh"
          >
            <vueCropper
              :ref="(el:any) => getRefs(el, index)"
              :img="url"
              :mode="options.mode"
              :canScale="options.canScale"
              :canMove="options.canMove"
              :full="options.full"
              :outputSize="options.size"
              :outputType="options.outputType"
              style="background-image: none"
            ></vueCropper>
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <el-empty v-else class="noMessage"></el-empty>
  </div>
</template>

<style lang="scss" scoped>
.dzjz-container {
  width: 100%;
  height: 100%;
  .dzjz-tabs {
    height: auto;
    :deep(.el-tabs__content) {
      padding: 0;
    }
  }
}
.content {
  width: 100%;
  height: calc(100% - 44px);
  padding: 10px;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #dae4f1;
    padding-bottom: 5px;
    margin-bottom: 5px;
    .topLeft {
      display: flex;
      cursor: pointer;

      img {
        padding-right: 5px;
        width: 22px;
        height: 15px;
        margin-top: 2px;
      }
      p {
        font-weight: 600;
      }
    }
    .button-group {
      width: 300px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      & > div:not(.select-mode) {
        margin-bottom: 7px;
      }
      .select-mode {
        width: 110px;
        :deep(.el-select__wrapper) {
          height: 28px;
          min-height: 28px;
        }
      }
    }
  }
}

.preview-box {
  position: relative;
  height: calc(100% - 40px);
  .page-num {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 99;
  }
  .swiper {
    width: 100%;
    height: 100%;
    :deep(.swiper-scrollbar) {
      width: 6px;
      .swiper-scrollbar-drag {
        min-height: 10px;
      }
    }
  }
}

.noMessage {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
